<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
        1.组件的命名方式
            组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。
            我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用  组件标签

            组件名大小写如何定义:
                    定义组件名的方式有两种：
                    1.kebab-case  短横线连接   customer-component1
                    2.PascalCase  驼峰命名     CustomerComponent1
           当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。
           也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。
           注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的  推荐使用kebab-case


        2.组件配置项可以有哪些
        组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，
        例如 data、computed、watch、methods 以及生命周期钩子等。
          2.1仅有的例外是像 el 这样根实例特有的选项
         2.2一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝

-->
<div id="app">
    <!--    dom环境中组件标签错误使用方式-->
    <!--    <CustomerComponent1></CustomerComponent1>-->
    <!--    dom环境中可以将驼峰命名的组件改写为短横线连接的形式-->
    <customer-component2></customer-component2>
</div>

<script>

    /*全局组件使用
    * 在所有子组件中，组件在各自内部也都可以相互使用
    * */
    Vue.component('CustomerComponent1', {
        template: '<div>hello vue component1</div>'
    })

    Vue.component('CustomerComponent2', {
        template: `<div>
                    <h1>hello vue component2</h1>
                    <CustomerComponent1></CustomerComponent1>
                 </div>`
    })

    let vm = new Vue({
        el: '#app',
        data: {}
    })

</script>
</body>
</html>